<template>
	<view class="container">
		<userinfo v-if="user_options.toLogin" id="user" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>

		<!-- 搜索框 -->
		<view class="seach-box" :style="'background-color:' + mobile_head_color">
			<form action="">
				<view class="search">
					<view class="search-icon">
						<image src="../../../static/images/search.png" class="search-img"></image>
					</view>
					<input v-model="notedata" confirm-type="search" @confirm="search()" confirm-hold="true" type="text" value=""
					 placeholder="请输入社区名" class="input-box" />
				</view>
			</form>
		</view>
		<!-- 居住社区 -->
		<scroll-view style="height:100%;
			margin-top: 140rpx;" scroll-y="true" :scroll-top="scrollTop" lower-threshold="10"
		 @scroll="scroll" @scrolltolower="scrollToBottom" :enable-back-to-top="true">
			<view class="container-box" v-if="listData.bind_village_list !== undefined && listData.bind_village_list.length > 0">
				<view class="h1">居住社区</view>
				<view class="card" v-for="(item, index) in listData.bind_village_list" :key="index" @tap="goVillage"
				 :data-village_id="item.village_id" :data-village_name="item.village_name" :data-village_logo="item.village_logo">
					<view class="village-icon">
						<image :src="item.village_logo" class="village-img"></image>
					</view>
					<view class="address-box">
						<view class="title-box">
							<view class="title">{{ item.village_name }}</view>
							<image src="../../../static/images/wancheng.png" mode="" v-if="item.isverify == 1" class="renzheng"></image>
						</view>
						<view class="distance-box">
							<view class="text">{{ item.village_address }}</view>
							<view class="text1" v-if="item.range">{{ item.range }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 社区列表 -->
			<view class="container-box" v-if="village_list !== undefined && village_list.length > 0">
				<view class="h1">社区列表</view>
				<view class="card" v-for="(item, index) in village_list" :key="index" @tap="goVillage" :data-village_id="item.village_id"
				 :data-village_name="item.village_name" :data-village_logo="item.village_logo">
					<view class="village-icon">
						<image :src="item.village_logo" class="village-img"></image>
					</view>
					<view class="address-box">
						<view class="title-box">
							<view class="title">{{ item.village_name }}</view>
							<image src="../../../static/images/wancheng.png" mode="" v-if="item.isverify == 1" class="renzheng"></image>
						</view>
						<view class="distance-box">
							<view class="text">{{ item.village_address }}</view>
							<view class="text1" v-if="item.range">{{ item.range }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tip" v-if="pageLoading == true">
				<lang keywords="加载中"></lang>
			</view>

			<view class="tip" v-if="pageLoadings == true">
				<lang keywords="更多小区正在入驻,敬请期待"></lang>
			</view>
			<view style="text-align:center;color:#333;font-size: 28rpx;padding: 10px 0;" v-if="pageComplete == true">
				<lang keywords="未搜索到相关社区"></lang>
			</view>
		</scroll-view>
		<!-- 弹层 -->
		<view>
			<uni-popup @click="openPopup" ref="popup" type="center" class="villageHousePopup">
				<view class="popup-box">
					<view class="popup-img1">
						<image src="../../../static/images/bg1.png" class="icon-img1"></image>
					</view>
					<view class="popup-img pigcmsIdView">请选择户号</view>
					<scroll-view class="popup-list" scroll-y="true" scroll-top="0" show-scrollbar="true">
						<view class="popup-card" v-for="(item, index) in listhouseData" @tap="goVillagehouse" :data-pigcms_id="item.pigcms_id">{{ item.address }}</view>
					</scroll-view>
					<view @click="closePopup" class="popup-btnl">
						<image src="../../../static/images/guanbi.png" class="popup-img2"></image>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import uniPopup from '../../../appComponent/uni/uni-popup/uni-popup.vue';
	import villagecopyfooter from '../../../appComponent/villagePage/copy_footer.vue'

	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	// 获取社区列表
	const getvillageList = () => {
		console.log('获取社区列表')
		var now_page = _this.pageIndex;
		if (_this.longitude == '' || _this.latitude == '') {
			console.log('获取社区列表111')
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					common.changeLocation('getLocation_msg', _this, res.longitude, res.latitude, 'gcj02');
				},
				fail: function(res) {
					console.log('定位失败：', res);
					village_info();
				}
			});
		} else {
			console.log('获取社区列表222')
			village_info();
		}
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	};

	const village_info = () => {
		var keyword = _this.notedata;
		console.log("搜索输入的结果", keyword)
		common.post(
			'HouseApi&a=village_list', {
				user_long: _this.longitude,
				user_lat: _this.latitude,
				page: _this.pageIndex,
				keyword: keyword,
				property_id: _this.property_id,
				referer_type: _this.referer_type
			},
			data => {
				if (!keyword) {
					console.log('HouseApi&a=village_list哈哈哈哈哈', data, _this);
					if (data.village_list.length > 0) {
						if (_this.pageIndex == 1) {
							_this.listData = data;
							_this.village_list = data.village_list;
						} else {
							_this.village_list = _this.village_list.concat(data.village_list);
						}
						console.log('village_list', _this.village_list);
					}
					console.log('HouseApi&a=village_listeeeeeeeeeeeeeee', data);
					if (_this.pageIndex < data.totalPage) {
						console.log('CCCCCCCCCCCCCCCCCCCCCCCC', data);
						_this.pageIndex = _this.pageIndex + 1;
						_this.pageLoading = true;
						_this.pageLoadings = false;
						_this.pageComplete = false;
					} else {
						console.log('HouseApi&a=village_list222222222222222222222', data);
						_this.pageLoading = false;
						_this.pageLoadings = true;
						_this.pageComplete = false;
					}
				} else {
					if (data.village_list) {
						if (_this.pageIndex == 1) {
							_this.listData = data;
							_this.village_list = data.village_list;
						} else {
							_this.village_list = _this.village_list.concat(data.village_list);
						}
						console.log('village_list', _this.village_list);
						_this.pageLoadings = false;
						_this.pageComplete = false;
					} else {
						_this.village_list = {}
						_this.pageLoading = false;
						_this.pageLoadings = false;
						_this.pageComplete = true;
					}
					console.log('HouseApi&a=village_listeeeeeeeeeeeeeee', data);
					if (_this.pageIndex < data.totalPage) {
						console.log('CCCCCCCCCCCCCCCCCCCCCCCC', data);
						_this.pageIndex = _this.pageIndex + 1;
						_this.pageLoading = false;
					} else {
						console.log('HouseApi&a=village_list222222222222222222222', data);
						_this.pageLoadings = false;
					}
				}
				if (data.referer_url) {
					_this.referer_url = data.referer_url;
				}
			}
		);
	};

	export default {
		data() {
			return {
				longitude: '',
				latitude: '',
				listData: [],
				village_list: [],
				listhouseData: {},
				user_options: {},
				villageid: '',
				villagename: '',
				villagelogo: '',
				scrollTop: '',
				scrollY: true,
				pageIndex: 1,
				pageLoading: false,
				pageLoadings: false,
				reachBottom: false,
				pageComplete: false,
				notedata: '',
				mobile_head_color: '#06c1ae',
				property_id: 0,
				referer_url: '',
				referer_type: '',
			};
		},
		// 上拉加载
		onReachBottom() {
			var _this = this;
			if (_this.pageLoading) {
				console.log('获取小区列表1')
				getvillageList();
				_this.pageLoading = false
			}
		},
		onPullDownRefresh() {
			_this.pageIndex = 1
			console.log('获取小区列表2')
			getvillageList()
		},
		onLoad: function(options) {
			_this = this;
			console.log('options', options);
			if (options && options.property_id) {
				_this.property_id = options.property_id;
			}
			if (options && options.referer_type) {
				_this.referer_type = options.referer_type;
			}
			common.setMainColor(_this, function(config) {
				_this.mobile_head_color = config.config.mobile_head_color;

				if (!app.globalData.is_login) {
					// #ifdef MP-WEIXIN || H5
					if (config.config.is_demo_domain) {
						uni.showModal({
							title: common.changeTxt('提示'),
							content: common.changeTxt('为了方便您测试 社区O2O 更多功能，建议您先进行登录。我们然后为您默认绑定一个测试小区。'),
							showCancel: true,
							cancelText: common.changeTxt('先看看'),
							confirmText: common.changeTxt('去登录'),
							success: function(res) {
								if (res.confirm) {
									_this.user_options = {
										toLogin: true
									};
								} else if (res.cancel) {
									console.log('++++++');
									console.log('获取小区列表3')
									getvillageList();
								}
							}
						});
					} else {
						console.log('获取小区列表4')
						getvillageList();
					}
					// #endif

					// #ifdef MP-ALIPAY
					console.log('获取小区列表4')
					getvillageList();
					// #endif
				} else {
					console.log('======');
					console.log('获取小区列表5')
					getvillageList();
				}
			});

			uni.setNavigationBarTitle({
				title: common.changeTxt('社区列表'),
			});
		},
		mounted() {

		},
		methods: {
			openPopup() {
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();
			},
			getLocation_msg(res) {
				if (res && res.lng) {
					_this.longitude = res.lng;
				}
				if (res && res.lat) {
					_this.latitude = res.lat;
				}
				console.log('反馈信息：', res);
				village_info();
			},
			getUserInfo(e) {
				console.log('user.info 1111111111', e);
				//if (e.userInfo) {
				console.log('获取小区列表6')
				_this.user_options = {}
				getvillageList();
				//}
			},
			goVillageIndex() {
				common.clearTabbarBusiness('village');
				if (common.checkIsFooterPage("/pages/village_menu/index")) {
					wx.reLaunch({
						url: "/pages/village_menu/index"
					});
				} else {
					wx.redirectTo({
						url: '/pages/village_menu/index'
					})
				}
			},
			// 选择小区
			goVillage(e) {
				_this = this;
				console.log('e', e);
				_this.villageid = e.currentTarget.dataset.village_id;
				_this.villagename = e.currentTarget.dataset.village_name;
				_this.villagelogo = e.currentTarget.dataset.village_logo;

				// 没有登录进入小区
				if (!app.globalData.is_login) {
					console.log('没有登录');
					var res = {
						village_id: _this.villageid,
						village_name: _this.villagename,
						village_logo: _this.villagelogo
					};
					uni.setStorageSync('village_key', res);
					if (_this.referer_url) {
						var referer_url = _this.referer_url + '&village_id=' + _this.villageid;
						common.parseUrl(referer_url, '', false, '');
					} else {
						_this.goVillageIndex();
					}
				} else {
					// 已登录选择房间
					console.log('已经登录');
					var res = {
						village_id: _this.villageid,
						village_name: _this.villagename,
						village_logo: _this.villagelogo,
						property_id: _this.property_id
					};
					uni.setStorageSync('village_key', res);
					common.post(
						'HouseApi&a=village_list_old', {
							village_id: _this.villageid,
						},
						data => {
							if (data) {
								console.log('HouseApi&a=village_list_old', data);
								_this.listhouseData = data;
								//选择的不是自己的小区
								if (data.length == 0) {
									if (_this.referer_url) {
										var referer_url = _this.referer_url + '&village_id=' + _this.villageid;
										common.parseUrl(referer_url, '', false, '');
									} else {
										_this.goVillageIndex();
									}
								} else if (data.length == 1) {
									var pigcms_id = data[0].pigcms_id;
									console.log('HouseApi&a=village_list_old+++', pigcms_id);
									var res = {
										village_id: _this.villageid,
										village_name: _this.villagename,
										village_logo: _this.villagelogo,
										pigcms_id: pigcms_id,
										property_id: _this.property_id
									};
									uni.setStorageSync('village_key', res);
									if (_this.referer_url) {
										var referer_url = _this.referer_url + '&village_id=' + _this.villageid + '&pigcms_id=' + pigcms_id;
										common.parseUrl(referer_url, '', false, '');
									} else {
										_this.goVillageIndex();
									}
								} else {
									_this.openPopup();
								}
							}
						}, _this, err => {
							console.log('err', err);
							if (err.data.errorCode == "20044013") {
								_this.user_options = {
									toLogin: true
								};
							} else if (errFun && errFun != 'back') {
								that[errFun](res.data);
							} else {
								uni.hideToast();
								var contents = res.data.errorMsg;
								if (!contents) {
									// contents = common.changeTxt('请求错误')
									console.log('请求错误', postUrl)
									return
								}
								if (res.data.errorCode == "60000001") {
									contents += app ? common.changeTxt(',请点击右上角关闭小程序') : ',请点击右上角关闭小程序'
								}
								wx.showModal({
									title: app ? common.changeTxt('提示') : '提示',
									content: contents,
									showCancel: false,
									success: function() {
										if (errFun == 'back') {
											wx.navigateBack();
										} else if (res.data.errorCode == "60000001") {
											common.post(url, param, callFun, that, errFun)
										}
									}
								});
							}
						}
					);
				}
			},
			//选择房间号
			goVillagehouse(e) {
				var pigcms_id = e.currentTarget.dataset.pigcms_id;
				var res = {
					village_id: _this.villageid,
					village_name: _this.villagename,
					village_logo: _this.villagelogo,
					pigcms_id: pigcms_id,
					property_id: _this.property_id
				};
				uni.setStorageSync('village_key', res);
				if (_this.referer_url) {
					var referer_url = _this.referer_url + '&village_id=' + _this.villageid + '&pigcms_id=' + pigcms_id;
					common.parseUrl(referer_url, '', false, '');
				} else {
					_this.goVillageIndex();
				}
			},
			search() {
				_this.pageIndex = 1
				console.log('获取小区列表7')
				getvillageList();
				_this.pageLoading = false;
				_this.pageLoadings = false;
			},
		},
		components: {
			uniPopup,
			villagecopyfooter
		}
	};
</script>

<style>
	page {
		background: #ffffff;
	}

	.container {
		margin: 0;
		padding: 0;
		background: #ffffff;
	}

	.seach-box {
		position: fixed;
		top: 0rpx;
		background: rgba(33, 192, 175, 1);
		overflow: hidden;
		width: 100%;
		z-index: 99;
	}

	.search {
		width: 686rpx;
		height: 88rpx;
		margin: 25rpx auto;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 46rpx 0rpx rgba(20, 96, 88, 0.06);
		border-radius: 15rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		overflow: hidden;
	}

	.search-icon {
		width: 32rpx;
		height: 32rpx;
		margin: 0 auto;
	}

	.search-img {
		width: 100%;
		height: 100%;
	}

	.input-box {
		width: 600rpx;
		height: 88rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 46rpx 0rpx rgba(20, 96, 88, 0.06);
		border-radius: 15rpx;
	}

	.container-box {
		display: flex;
		flex-direction: column;
	}

	.h1 {
		font-size: 34rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #333333;
		margin-left: 32rpx;
		margin-top: 18rpx;
	}

	.card {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 690rpx;
		height: 174rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 17rpx 1rpx rgba(216, 216, 216, 0.68);
		border-radius: 20rpx;
		margin: 14rpx auto;
	}

	.village-icon {
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		margin: 0 30rpx;
		box-shadow: 0px 0px 16px 0px rgba(182, 182, 182, 0.38);
		padding: 12rpx;
		border-radius: 100%;
	}

	.village-img {
		width: 100%;
		height: 100%;
		border-radius: 135rpx;
	}

	.address-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.title-box,
	.distance-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		font-size: 36rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #202020;
	}

	.text {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 32rpx;
		letter-spacing: 0rpx;
		color: #333333;
		margin-top: 12rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.title1 {
		width: 140rpx;
		height: 46rpx;
		background-image: linear-gradient(90deg, #feb40d 0%, #ff6030 100%), linear-gradient(#cce198, #cce198);
		background-blend-mode: normal, normal;
		box-shadow: 0rpx 0rpx 8rpx 1rpx rgba(248, 88, 40, 0.35);
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 46rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
		text-align: center;
		border-radius: 25rpx 0 0 25rpx;
	}
	.renzheng {
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		padding-right: 25rpx;
	}
	.text1 {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #666666;
		text-align: center;
		margin-right: 36rpx;
		display: flex;
		flex-shrink: 0;
	}

	/* 房间号弹层 */
	.popup-box {
		width: 610rpx;
		height: 720rpx;
		border-radius: 10px;
	}

	.popup-img {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 100rpx;
	}

	.popup-img1 {
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -150rpx;
	}

	.pigcmsIdView {
		font-size: 40rpx;
		font-weight: 600;
		color: #333;
	}

	.icon-img1 {
		width: 100%;
		height: 100%;
	}

	.popup-list {
		position: absolute;
		top: 185rpx;
		width: 540rpx;
		height: 560rpx;
		border-radius: 10px;
		overflow: hidden;
	}

	.popup-card {
		width: 439rpx;
		height: 77rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 77rpx;
		letter-spacing: 0rpx;
		color: #333333;
		border-radius: 5px;
		/*background: rgba(245, 245, 245, 1);*/
		margin: 10rpx auto;
	}

	.popup-btnl {
		position: absolute;
		bottom: -100rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 40rpx;
		border-radius: 58rpx;
		font-size: 26rpx;
		background-color: #ffffff;
		padding: 16rpx;
	}

	.popup-img2 {
		width: 100%;
		height: 100%;
	}

	.popup-btnr {
		position: absolute;
		bottom: 57rpx;
		right: 90rpx;
		font-size: 26rpx;
		width: 200rpx;
		height: 80rpx;
		background: rgba(6, 193, 174, 1);
		border-radius: 40rpx;
		color: #ffffff;
		line-height: 80rpx;
	}

	/* 提示窗口 */
	.uni-tip {
		padding: 15px;
		width: 300px;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10px;
	}

	.uni-tip-title {
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}

	.uni-tip-content {
		padding: 15px;
		font-size: 14px;
		color: #666;
	}

	.uni-tip-group-button {
		margin-top: 10px;
		display: flex;
	}

	.uni-tip-button {
		width: 100%;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}

	.tip {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #666;
		padding: 10px 0;
		background: #f8f8f8;
	}

	.tip image {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}

	.uni-popup__wrapper-box {
		border-radius: 20rpx;
		overflow-y: visible !important;
	}
</style>
